<template>
    <div class="body">
        <div class="title">~代码写不完怎么办~</div>
        <div class="input">
            <input type="text" placeholder="添加要做的事儿..."  v-model="ipt"> <button @click="shuru">提交</button>
        </div>
    </div>
</template>
<script setup>
    import {onMounted, ref} from 'vue'
    import emitter from '../plugins/Bus'
    
    let ipt = ref() 

    const shuru = ()=>{
        let obj = {
            id:new Date().getTime(),
            name:ipt.value,
            done:false
        }
        emitter.emit('fn', obj)
    }
    onMounted(()=>{
       
    })
    
</script>

<style scoped>
.body{
        text-align: center;
        display: flex;
        flex-direction: column;
        margin: 50px 0 40px 0;
    }
    .title{
        color: #00bfff;
        font-size: 22px;
        margin-bottom: 18px
    }
    .input{
        display: flex;
    }
    input{
        width: 100%;
        border: 0;
        outline: none;
        border-bottom: 2px dotted rgb(86, 145, 217);
    }
    button{
        width: 80px;
       height: 30px;
    }
</style>